import cz from "@/assets/icons/cz.svg";
import PencilSquare from "@/assets/icons/PencilSquare.svg";
import ar from "@/assets/icons/ar.svg";
import stop from "@/assets/icons/stop.svg";
import edit from "@/assets/icons/edit.svg";
import Group1000002132 from "@/assets/icons/Group1000002132.svg";

// 渲染dom
export const domData = (tableData) => {
  let dom = `${tableData
    .map((data, key) =>
      data.children.map(
        // onclick='onDetailsPage(${JSON.stringify(item.order_name)})'

        (item, index) =>
          `<tr>
            <td>
            <div
            class="${index !== 0 ? "tb-orders dNone" : "tb-orders"}" >
              <strong
              class='detailsPage'>${item.order_name}
                         <img class='tb-copy'
              onclick='onCopy(event,${JSON.stringify(item.order_name)})'
              src="${cz}" alt="" srcset="" />
              </strong>
              </div>
              <div class="${
                !!item.address2 ? "tb-remark " : "tb-remark dNone-1"
              }">
                <div
                 onmouseenter="checkoutListEditHtmlEnter(event,${22})"
                onmouseleave="checkoutListEditHtmlLeave()"
                class="checkoutListEditHtml">${item.address2} </div>
                <img
           
                onclick='onEditNote(event)'
                src="${edit}" alt="" srcset="" />
              </div>
              <div
              class="${
                !item.address2
                  ? "tb-notRemark checkoutListEdit"
                  : "tb-notRemark dNone-1 checkoutListEdit"
              }">
              <img 
              class='noteImg'
              onclick='onEditNote(event)'
              src="${PencilSquare}" alt="" srcset="" />
              <div class="checkoutListEditHtml" 
                onmouseenter="checkoutListEditHtmlEnter(event,${JSON.stringify(
                  item.address2
                )})"
                onmouseleave="checkoutListEditHtmlLeave()"
              >Make Note</div>
                   <img 
                   class='ml-5'
              onclick='onEditNote(event)'
              src="${edit}" alt="" srcset="" />
            </div>
            </td>
            <td> 
                <div class="${index !== 0 ? "tb-store dNone-1" : "tb-store"}" >
              <img src="${Group1000002132}" alt="" srcset="" />
                <p>${item.province}</p>
              </div>
              </td>
          <td> 
              <div class="tb-Product">
              <img src="${stop}" alt="" srcset="" />
              <div class="p-text">
                <p class="p-title">
               ${item.ns_order_no}
                </p>
                <p>
                  <!-- SKU: F3Q225-15ml -->
                  <span class="p13777">SKU：</span>
                  <strong>${index}</strong>
                 ${item.currency} 
                </p>
                <p>
                  <span class="p13777">Options：</span>
                  <span class="spanDiv">15ml</span>
                </p>
                <p>
                  <span class="p13777">Price：</span>
                   <strong class='${
                     !index ? "fontC777" : ""
                   }'> ${index}</strong>
                    <span class='${!index ? "fontC777" : ""}'   >  ${
            item.currency
          }  </span>
                </p>
                <p>
                  <span class="p13777">Quantity：</span>
                  <strong > ${item.price} </strong>
                 ${item.currency}   
                </p>
             </div>
          </div>
          </td>

          <td>  
              <div class="tb-productCost">
               <strong class='p-22214'> ${item.price} </strong>
               <span  class='p13222'>  ${item.currency}   </span>
          </div>
          </td>
          <td>  
              <div class="tb-shipping">
               <strong class='p-22214'> ${item.price} </strong>
               <span  class='p13222'>  ${item.currency}   </span> 
                  <img src="${ar}" alt="" srcset=""   class='imgfirstChild' onclick="onEditBlock(event)" />
                          <div class="tb-editAddress">
                            <div class="address" class='p-22214'>   ${
                              item.price
                            } </div>
                          </div>

          </div>
          </td>
          <td>
           <div class="tb-total">
          <p >
              <strong class="p-22214"> ${item.price}   </strong>
              <span class="class='p13222"> ${item.currency} </span>
              
            </p>
            <p class="p13777 line-through">
             ${item.price} 
          ${item.currency}
            </p>
            <p class="p13red">
             ${item.price}
              <span class='p13red'> ${item.currency}</span>
            </p>
          </div>
          </td>
          <tr/>`
      )
    )
    .join("")}`;
  return dom;
};

//处理数据格式转换数组
export const fiterArr = (data) => {
  let tableDataArrNew = [];
  for (var i in data) {
    tableDataArrNew.push(...data[i]);
  }
  // 数组中descrition相同的对象合并成一个children
  let b = [];
  tableDataArrNew.forEach((item, index) => {
    let flag = true;
    b.forEach((item2, index2) => {
      if (item.ns_order_no === item2.ns_order_no) {
        flag = false;
        b[index2].children.push(item);
      }
    });
    if (flag) {
      b.push({
        ns_order_no: item.ns_order_no,
        children: [item],
        x: index,
      });
    }
  });

  return b;
};
